13장 스코프

13-1. 스코프란?

스코프(유효범위): 식별자가 유효한 범위

• 스코프는 변수 그리고 함수와 깊은 관련이 있음
• 더욱이 자바스크립트의 스코프는 다른 언어의 스코프와 구별되는 특징이 있으므로 주의가 필요!

function add(x, y) {
  // 매개변수는 함수 몸체 내부에서만 참조할 수 있다.
  // 즉, 매개변수의 스코프(유효범위)는 함수 몸체 내부다.
  console.log(x, y); // 2 5
  return x + y;
}
 
add(2, 5);
 
// 매개변수는 함수 몸체 내부에서만 참조할 수 있다.
console.log(x, y); // ReferenceError: x is not defined

변수는 코드의 가장 바깥 영역뿐 아니라 코드 블록이나 함수 몸체 내에서도 선언 가능

이때 코드 블록이나 함수는 중첩될 수 있음!

var var1 = 1; // 코드의 가장 바깥 영역에서 선언한 변수
 
if(true) {
  var var2 = 2; // 코드 블록 내에서 선언한 변수
  if(true) {
    var var3 = 3; // 중첩된 코드 블록 내에서 선언한 변수
  }
}
 
function foo() {
  var var4 = 4; // 함수 내에서 선언한 변수
  function bar() {
    var var5 = 5; // 중첩된 함수 내에서 선언한 변수
  }
}
 
console.log(var1); // 1
console.log(var2); // 2
console.log(var3); // 3
console.log(var4); // ReferenceError: var4 is not defined
console.log(var5); // ReferenceError: var5 is not defined

변수는 자신이 선언된 위치에 의해 자신이 유효한 범위, 즉 다른 코드가 변수 자신을 참조할 수 있는 범위가 결정됨

변수뿐만 아니라 모든 식별자가 이에 해당함

따라서, 모든 식별자(변수 이름, 함수 이름, 클래스 이름 등)는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정되며, 이를 스코프라 하는 것이다!

식별자 결정 : 자바스크립트 엔진이 이름이 같은 변수들 중 어떤 변수를 참조할 것인지를 결정하는 행위

var x = 'global';
 
function foo() {
 var x = 'local';
 console.log(x);
}
 
foo(); // local
 
console.log(x); // global

위 예제에서 가장 바깥 영역에 선언된 x 변수와 foo 함수 내부에서 선언된 x 변수는 식별자 이름이 동일하지만 스코프가 다른 별개의 변수

이는 자바스크립트 엔진이 코드를 실행할 때 코드의 문맥을 고려하기 때문

-> 따라서 스코프란 자바스크립트 엔진이 식별자를 검색할 때 사용하는 규칙이라고도 할 수 있음

코드의 문맥과 환경

• 렉시컬 환경: 코드가 어디서 실행되며 주변에 어떤 코드가 있는가
• 코드의 문맥: 렉시컬 환경으로 이뤄지고, 이를 구현한 것이 실행 컨텍스트 모든 코드는 실행 컨텍스트에서 평가되고 실행 이에 대해서는 23장 “실행 컨텍스트”에서 자세히 살펴보자.

스코프를 통해 식별자인 변수 이름의 충돌을 방지 -> 같은 이름의 변수를 사용할 수 있게 함

스코프 내에서 식별자는 유일해야 하나, 다른 스코프에는 같은 이름의 식별자를 사용 가능

-> 따라서 스코프는 네임스페이스!

예시: 디렉터리가 다른 파일 이름은 중복 가능

13-2. 스코프의 종류

코드의 구분

13-2-1. 전역과 전역 스코프

전역: 코드의 가장 바깥 영역

• 전역은 전역 스코프를 만듦
• 전역에 변수를 선언하면 전역 스코프를 갖는 전역 변수가 됨

전역 변수는 어디서든 참조 가능!

13-2-2. 지역과 지역 스코프

지역: 함수 몸체 내부

• 지역은 지역 스코프를 만듦
• 지역에 변수를 선언하면 지역 스코프를 갖는 지역 변수가 됨

지역 변수는 자신의 지역 스코프와 하위 지역 스코프에서만 유효!

13-3. 스코프 체인

스코프 체인: 스코프가 계층적으로 연결된 것

함수의 중첩: 함수 몸체 내부에서 함수가 정의 $중첩 함수 \subset 외부 함수$

-> 함수가 중첩될 수 있으므로 함수의 지역 스코프도 중첩될 수 있음 따라서, 스코프가 함수의 중첩에 의해 계층적 구조를 가짐!

외부 함수의 지역 스코프 == 중첩 함수의 상위 스코프

위 예제에서의 계층 구조: $inner 함수 지역 스코프 \subset outer 함수 지역 스코프 \subset 전역 스코프$

변수를 참조할 때 자바스크립트 엔진의 동작

1. 변수를 참조하는 코드의 스코프에서 시작
2. 상위 스코프 방향으로 이동
3. 선언된 변수를 검색

• 상위 스코프에서 선언한 변수를 하위 스코프에서 참조할 수 있음
• 이때 사용되는 것이 스코프 체인!

렉시컬 환경

• 스코프 체인은 물리적 실체로 존재
• 실행 컨텍스트의 렉시컬 환경을 단방향으로 연결한 형태 이에 대해서는 23장 “실행 컨텍스트”에서 자세히 살펴보자

필자 정리 상위 스코프와 체인은 ppt 슬라이드나 그림판에서의 “레이어” 개념과 비슷함 저번 주 함수 단원에서 나왔던 ‘Function 생성자 함수는 일반 함수와는 달리 항상 전역 스코프만을 상위 스코프로 가진다’ 라는 얘기는 다음과 같이 이해할 수 있음

전역 스코프는 ppt 슬라이드나 그림판의 배경에 해당함 따라서 Function 생성자 함수를 생성하게 되면 자동으로 ‘맨 뒤로 보내기’가 적용되는 것과 같음

13-3-1. 스코프 체인에 의한 변수 검색

• 자바스크립트 엔진은 항상 상위 스코프 방향으로만 이동
• 상위 스코프에서 유효한 변수: 하위 스코프에서 자유롭게 참조 가능
• 하위 스코프에서 유효한 변수: 상위 스코프에서 참조 불가능
• 스코프 체인의 계층적 구조는 상속과 유사

13-3-2. 스코프 체인에 의한 함수 검색

// 전역 함수
function foo() {
   console.log('global function foo');
}
 
function bar() {
   // 중첩 함수
   function foo() {
      console.log('local function foo');
   }
   foo();
}
 
bar(); // local function foo

• 중첩 함수 내에서 foo 함수를 호출하면 자바스크립트 엔진은 식별자 foo를 검색
• 함수는 식별자에 함수 객체가 할당된 것 외에는 일반 변수와 다를 바 없음
• 스코프는 결국 “식별자를 검색하는 규칙”

13-4. 함수 레벨 스코프

: var 키워드로 선언된 변수는 오로지 함수의 코드 블록(함수 몸체)만을 지역 스코프로 인정하는 특성

블록 레벨 스코프 : 함수 몸체만이 아니라 모든 코드 블록(조건문, 반복문 등)이 지역 스코프를 만드는 특성

var x = 1;
 
if (true) {
   var x = 10;
}
 
console.log(x); // 10

• 전역 변수 x가 선언되었고 if 문의 코드 블록 내에도 x 변수가 선언됨
• var 키워드로 선언된 변수는 함수 레벨 스코프만 인정
• var 키워드로 함수 밖에서 x가 선언되었기 때문에 if 문에서 선언된 x도 전역 변수의 중복 선언임
• 결국 함수 내에서 선언된 게 아니면 모두 전역 변수!

var i = 10;
 
for (var i = 0; i < 5; i++) {
   console.log(i); // 0 1 2 3 4
}
 
console.log(i); // 5

• if 문 예제와 같이 for 문 예제도 동일한 형태
• var 변수 i는 역시 전역 변수
• for 문 내에서 선언된 변수 i는 전역 변수 i의 중복 선언
• 전역 변수이므로 값이 재할당

• let, const 키워드는 블록 레벨 스코프를 지원 이에 대해서는 15장 “let, const 키워드와 블록 레벨 스코프”에서 자세히 살펴보자

13-5. 렉시컬 스코프

1. 동적 스코프 : 함수 호출 위치를 기준으로 함수의 상위 스코프를 결정

• 함수를 정의하는 시점에는 함수가 어디서 호출될지 알 수 없음

2. 정적 스코프( = 렉시컬 스코프) : 함수 정의 위치를 기준으로 함수의 상위 스코프를 결정

• 함수 정의가 평가되는 시점에 상위 스코프가 정적으로 결정

자바스크립트를 비롯한 대부분의 프로그래밍 언어는 렉시컬 스코프

var x = i;
 
function foo() {
   var x = 10;
   bar();
}
 
function bar() {
   console.log(x);
}
 
foo(); // 1
bar(); // 1

• 렉시컬 스코프를 통해 보면 bar 함수는 foo 함수 외부에서 정의되었기 때문에 전역 스코프를 기억!
• 따라서 bar 함수가 호출되면 호출된 곳에 관계 없이 자신이 기억한 전역 스코프를 상위 스코프로 사용

• 렉시컬 스코프는 클로저와 깊은 관계 이에 대해서는 24장 “클로저”에서 자세히 살펴보자

🧐 스코프 개념 확인 문제

1. 스코프(Scope)에 대한 설명으로 가장 옳지 않은 것은 무엇인가요?

A. 스코프는 식별자가 유효한 범위를 말하며, 변수와 함수와 깊은 관련이 있다. B. 스코프는 자바스크립트 엔진이 이름이 같은 식별자들 중 어떤 것을 참조할지 결정하는 규칙이라고 할 수 있다. C. 스코프는 식별자 이름의 충돌을 방지하여 같은 이름의 변수를 여러 스코프에서 사용할 수 있게 하는 네임스페이스 역할을 한다. D. 지역 변수는 자신이 선언된 지역 스코프를 포함하여 상위 지역 스코프에서도 유효하다.

2. 다음 코드에서 console.log(x)의 출력 결과가 ‘local’이 되는 이유를 설명하는 핵심 개념은 무엇인가요?

var x = 'global';
function foo() {
   var x = 'local';
   console.log(x); // 'local'
}
foo();
console.log(x); // 'global'

A. 렉시컬 스코프 (Lexical Scope) B. 스코프 체인 (Scope Chain) C. 함수 레벨 스코프 (Function-level Scope) D. 식별자 결정 (Identifier Resolution)

3. 자바스크립트의 스코프 체인(Scope Chain)에 대한 설명으로 가장 적절한 것은 무엇인가요?

A. 스코프 체인은 변수 참조 시 하위 스코프부터 상위 스코프 방향으로 이동하며 변수를 검색하는 규칙이다. B. 스코프 체인은 물리적 실체가 없으며, 개념적으로만 존재하는 변수 검색 메커니즘이다. C. 함수가 중첩될 때, 외부 함수의 지역 스코프는 중첩 함수의 하위 스코프가 된다. D. 하위 스코프에서 선언된 변수는 스코프 체인을 통해 상위 스코프에서도 자유롭게 참조될 수 있다.

4. 다음 코드와 var 키워드가 갖는 함수 레벨 스코프 특성에 기반할 때, 최종 console.log(i)의 출력 결과는 무엇인가요?

var i = 10;
 
for (var i = 0; i < 5; i++) {
   console.log(i); // 0 1 2 3 4
}
 
console.log(i); 

A. 10 B. 4 C. 5 D. ReferenceError: i is not defined

5. 자바스크립트가 채택하고 있는 렉시컬 스코프 (정적 스코프)에 대한 설명으로 옳은 것은 무엇인가요?

A. 함수 호출 위치를 기준으로 함수의 상위 스코프가 결정된다. B. 함수 정의 위치를 기준으로 함수의 상위 스코프를 결정한다. C. 렉시컬 스코프는 변수 검색 시 호출된 곳과 관계없이 가장 최근에 호출된 함수의 스코프를 사용한다. D. 렉시컬 스코프는 let과 const 키워드가 도입되면서 자바스크립트에 적용된 새로운 스코프 결정 방식이다.